<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <script type="text/javascript" src="https://cdn.insdep.com/jquery/jquery-1.11.3.min.js"></script>
    <title>My JSP 'test.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<style type="text/css">
/*导航容器，定义导航的宽度高度信息*/
._nav {
	width: 280px;
	height: 100%;
}
/*设置导航节点样式*/
._nav a{
	text-decoration: none;
}
/*导航顶部的信息，一般是系统菜单之类的*/
._nav>div {
	height: 40px;
	width: 100%;
	background: #0C88C2;
}
/*导航顶部的文字信息*/
._nav>div>span{
	color: white;
	line-height: 40px;
	text-align: left;
	margin-left:40px;
	font-weight: bold;
	margin-left: 40px;
}
/*设置一级导航的样式*/
._nav>ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
}
/*设置一级导航的背景图片*/
._nav>ul>li {
	text-align: left;
	background: url(css/img/skin_/leftmenubg1.png) repeat-x;
}
/*设置一级导航文字的样式*/
._nav>ul>li>a {
	color: #4a4a4a;
	height: 36px;
	line-height: 36px;
}
/*设置一级导航的没有选中时的箭头*/
._nav_arrow_notclick{
	display:inline-block;
	width:9px;
	height:9px;
	background:url(css/img/skin_/arrowdown.png) no-repeat;
	margin-left: 25px;
	margin-right: 5px;
}
/*设置一级导航的选中时的箭头*/
._nav_arrow_click{
	display:inline-block;
	width:9px;
	height:9px;
	background:url(css/img/skin_/arrowright.png) no-repeat;
	margin-left: 25px;
	margin-right: 5px;
}
/*二级导航样式设定*/
.nav_second{
	margin-top:5px;
	list-style: none;
	display: none;
	padding: 0px;
	margin-left: 9px;	
}
/*二级导航高度宽度*/
.nav_second>li{
	height: 30px;
	width: 100%;
	margin-bottom: 3px;
}
/*二级导航图标*/
.nav_second>li>span {
	display: inline-block;
	background: url(css/img/skin_/leftlist.png) no-repeat;
	margin-top:7px;
	width: 12px;
	height: 15px;
	margin-left: 30px;
	margin-right: 5px;
}
/*二级导航文字*/
.nav_second>li>a{
	line-height: 30px;
	font-size: 15px;
}
/*二级导航悬浮效果*/
.nav_second>li>a:HOVER{
	color: #047db6;
	font-weight: bold;
}

</style>
<script type="text/javascript">
	$(function(){
		//定义一级导航选中的效果
		$("._nav>ul>li").click(function(){
			//所有的箭头都变为未选中
			$("._nav>ul>li>span").removeClass("_nav_arrow_click").addClass("_nav_arrow_notclick");
			//所有的二级导航都隐藏
			$("._nav>ul>li>ul").hide();
			//当前选中的箭头变为选中
			$(this).children("span").removeClass("_nav_arrow_notclick").addClass("_nav_arrow_click");
			//二级导航展示
			$(this).children("ul").show();
			//所有一级导航的颜色恢复默认
			$("._nav>ul>li>a").css("color","#4a4a4a");
			//所有一级导航字体恢复默认
			$("._nav>ul>li>a").css("font-weight","normal");
			//当前选中的导航颜色变蓝
			$(this).children("a").css("color","#0C88C2");
			//当前选中的导航字体加粗
			$(this).children("a").css("font-weight","bold");
		});
		//定义二级导航选中效果
		$(".nav_second>li").click(function(){
			//所有二级导航背景颜色置为白色
			$(".nav_second>li").css("background-color","white");
			////所有二级导航字体变为黑色
			$(".nav_second>li").css("color","black");
			//当前二级导航背景变为蓝色
			$(this).css("background-color","#38A3D5");
			//当前二级导航字体白色
			$(this).css("color","white");
		});
		
	});
</script>
  </head>
  
  <body>
	<div class="_nav">
		<div>
			<span>安全管理</span>
		</div>
		<ul>
			<li>
				<span class="_nav_arrow_notclick"></span>
				<a>
					新闻管理
				</a>
				<ul class="nav_second">
					<li>
						<span></span>
						<a>新闻视频管理</a>
					</li>
					<li>
						<span></span>
						<a>新闻频道管理</a>
					</li>
					<li>
						<span></span>
						<a>新闻人物管理</a>
					</li>
					<li>
						<span></span>
						<a>新闻制作管理</a>
					</li>
				</ul>
			</li>
			<li>
				<span class="_nav_arrow_notclick"></span>
				<a>用户信息设置</a>
			</li>
			<li>
				<span class="_nav_arrow_notclick"></span>
				<a>工作安排</a>
			</li>
			<li>
				<span class="_nav_arrow_notclick"></span>
				<a>数据管理</a>
			</li>
		</ul>
	</div>
</body>
</html>
